<!--
 * @Description: 意见区
-->
<template>
  <div
    class="opinion-area-item"
    :class="[
      'comment-' + data.id,
      'opinion-area-item-normal',
      isReplyItem ? 'opinion-area-item-replyItem' : '',
      data.isNew ? 'opinion-area-item-new' : ''
    ]">
    <div
      :class="[
        'context-context',
        {
          'context-context-child': isChildren,
          'context-context-replyItem': isReplyItem,
          'opinion-area-item-new': data.isNew
        }
      ]">
      <div class="context-toolbar">
        <div class="toolbar-header">
          <img
            @click.stop="showBaseInfo(data.createId)"
            icon="user"
            :src="data.avatarImageUrl"
            @mouseover.once="
              data.avatarImageUrl = data.avatarImageUrl.replace('igonregif=0', 'igonregif=1')
            " />
        </div>
        <div class="toolbar-middle">
          <div class="toolbar-name-container">
            <div class="toolbar-name-wrapper">
              <div class="toolbar-name-box">
                <a-tooltip
                  v-if="data.createName"
                  arrowPointAtCenter="true"
                  :title="data.createName">
                  <span class="author-name" @click.stop="showBaseInfo(data.createId)">{{
                    data.createName
                  }}</span>
                </a-tooltip>
                <a-tooltip
                  v-if="data.departmentFullName"
                  arrowPointAtCenter="true"
                  :title="data.departmentFullName">
                  <span class="department-name">{{ data.departmentName }}</span>
                </a-tooltip>
              </div>
            </div>
          </div>
          <div
            v-if="
              data.extAtt2 ||
              [
                'collaboration.affair.skipExtended',
                'common.toolbar.senderSendAgain.label'
              ].includes(data.extAtt3)
            "
            class="replay-state">
            <!-- 由xx代理的data -->
            <a-tooltip
              arrowPointAtCenter="true"
              v-if="$i18n('collaboration.agent.label', data.extAtt2)"
              :title="$i18n('collaboration.agent.label', data.extAtt2)">
              <span v-if="data.extAtt2" class="proxy-member content-ellipsis">{{
                $i18n('collaboration.agent.label', data.extAtt2)
              }}</span>
            </a-tooltip>
            <!-- 再次发起和跳过 -->
            <a-tooltip
              arrowPointAtCenter="true"
              v-if="
                [
                  'collaboration.affair.skipExtended',
                  'common.toolbar.senderSendAgain.label'
                ].includes(data.extAtt3)
              "
              :title="data.extAtt3I18n">
              <span
                v-if="
                  [
                    'collaboration.affair.skipExtended',
                    'common.toolbar.senderSendAgain.label'
                  ].includes(data.extAtt3)
                "
                class="content-ellipsis"
                >{{ data.extAtt3I18n }}</span
              >
            </a-tooltip>
          </div>
        </div>
        <!-- 右侧态度 -->
        <div
          v-if="
            !['collaboration.affair.skipExtended', 'common.toolbar.senderSendAgain.label'].includes(
              data.extAtt3
            )
          "
          class="comment-status"
          :class="['comment-status-' + statusReplaceStr(data)]">
          <a-tooltip
            v-if="
              data.extAtt1I18n &&
              data.extAtt3I18n &&
              data.extAtt3 !== 'collaboration.dealAttitude.repeat.auto.skip'
            "
            :title="`${data.extAtt3I18n}${data.extAtt1I18n}`"
            arrowPointAtCenter="true">
            <span class="att-ellipsis">{{ data.extAtt3I18n }}{{ data.extAtt1I18n }}</span>
          </a-tooltip>
          <a-tooltip
            v-else-if="
              !data.extAtt1I18n &&
              data.extAtt3I18n &&
              data.extAtt3 !== 'collaboration.dealAttitude.repeat.auto.skip'
            "
            :title="data.extAtt3I18n"
            arrowPointAtCenter="true">
            <span class="att-ellipsis">{{ data.extAtt3I18n }}</span>
          </a-tooltip>
          <a-tooltip
            v-else-if="data.extAtt1I18n && !data.extAtt3I18n"
            :title="data.extAtt1I18n"
            arrowPointAtCenter="true">
            <span class="att-ellipsis">{{ data.extAtt1I18n }}</span>
          </a-tooltip>
        </div>
        <!-- 点赞和回复 -->
      </div>
      <div class="context-text">
        <div v-if="data.canView">
          <span v-if="data.praiseToSummary" class="syIcon sy-praise-fill"></span>
          <span
            v-if="isChildren"
            v-html="
              data.replyToName ? `${$i18n('common.button.reply.label')}${data.replyToName}：${data.escapedContent}` : `${data.escapedContent}`
            "
            class="reply-content"></span>
          <span v-else class="opinion-area-table" v-html="data.escapedContent"></span>
          <!-- 附件 -->
          <!-- 附件列表 -->
          <FileList
            :isCreated="false"
            :headerStyle="{
              marginBottom: '4px',
              color: '#999',
              fontSize: '12px'
            }"
            :isDisplayExpand="false"
            :isInlineLayout="false"
            :attachments="attachmentList"
            :relationDocs="data.assDocDomain"
            :areaName="getDocArea(data)" />
        </div>
        <div v-else>
          <span v-if="data.praiseToSummary" class="syIcon sy-praise-fill"></span>
          <span>[{{ $i18n('common.display.hidden.label') }}]</span>
        </div>
        <div v-if="data.m1Info && !isChildren" class="from-mobile">{{ data.m1Info }}</div>
      </div>
      <div
        v-if="!isChildren"
        class="header-notes header-bar"
        :class="{ noReplayClass: isChildren || !data.children || !data.children.length }">
        <div class="comment-data">{{ dateFormat(data.createDate) }}</div>
        <div class="toolbar-reply" v-if="data.subType !== '1'">
          <span v-if="data.hasWfOperation" class="process-logs">
            <a-popover placement="topRight">
              <template slot="content">
                <Scroll style="max-height: 300px">
                  <p v-for="(log, index) in processLogs[data.id]" :key="index" class="log-wrapper">
                    {{ log }}
                  </p>
                </Scroll>
              </template>
              <span>
                <icon-font type="sy-file" />
              </span>
            </a-popover>
          </span>
          <span
            class="comment-praise"
            v-if="canPraise && !data.readOnly "
            :class="canReply ? 'praise' : 'disabled'"
            @click.stop="handleLike(data)"
            ><i class="syIcon" :class="[data.praiseToComment ? 'sy-praise-fill' : 'sy-praise']"></i
            ><span>({{ data.praiseNumber }})</span></span
          >
          <span
            @click.stop="replyHandel(data, rootId)"
            class="comment-reply"
            v-if="canReply && !data.readOnly"
            >{{ $i18n('cap4.bind.label.reply') }}</span
          >
        </div>
      </div>

      <div v-if="isChildren" class="context-bottom">
        <div v-if="data.m1Info && isChildren" class="from-mobile">{{ data.m1Info }}</div>
        <div class="toolbar-reply setting-replay">
          <div class="replay-time">{{ dateFormat(data.createDate) }}</div>
          <span
            v-if="!isChildren"
            class="comment-praise"
            :class="canReply ? 'praise' : 'disabled'"
            @click.stop="handleLike(data)"
            ><i class="syIcon" :class="[data.praiseToComment ? 'sy-praise-fill' : 'sy-praise']"></i
            ><span>({{ data.praiseNumber }})</span></span
          >
          <span v-if="data.hasWfOperation" style="margin-right: 5px; font-size: 14px">
            <a-popover placement="topRight">
              <template slot="content">
                <Scroll style="max-height: 300px">
                  <p v-for="(log, index) in processLogs[data.id]" :key="index" class="log-wrapper">
                    {{ log }}
                  </p>
                </Scroll>
              </template>
              <div>
                <icon-font type="sy-file" />
              </div>
            </a-popover>
          </span>
          <span
            style="line-height: 14px"
            @click.stop="replyHandel(data, rootId)"
            class="comment-reply"
            v-if="canReply && !data.readOnly"
            >{{ $i18n('cap4.bind.label.reply') }}</span
          >
          <div v-if="data.praiseToSummary" class="syIcon sy-praise-fill"></div>
        </div>
      </div>
    </div>
    <div class="opinion-area-item-cld" v-if="!isChildren && data.children && data.children.length">
      <OpinionAreaItem
        :rootId="rootId"
        :isForward="isForward"
        :key="item.id"
        :data="item"
        :canReply="canReply"
        :replyItem="replyItem"
        :isChildren="true"
        @reply="replyHandel"
        v-for="item in data.children"
        :processLogs="processLogs" />
    </div>
  </div>
</template>
<script>
  import globalMethods from '@/plugins/methods';
  //引入附件、关联列表集合
  import FileList from '@/components/classic-layout/summary/file-new';
  // 引入相关数据
  import { mapState } from 'pinia';
  import api from '@/api';
  import { useBaseInfoStore } from '@/store/modules/base-info';
  import { showBaseInfo } from '@/helper/people-card';

  export default {
    name: 'OpinionAreaItem',
    components: { FileList },
    props: {
      replyItem: {
        type: Object
      },
      data: {},
      rootId: {},
      isChildren: { type: Boolean, default: false },
      canReply: {
        // 是否能回复
        type: Boolean,
        default: true
      },
      clickFlag: false,
      processLogs: {
        type: Object,
        default: () => ({})
      },
      isForward: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        IsMaxWidthOfTd1: false,
        IsMaxWidthOfTd2: false,
        MaxOfAttitudeWidth: 68
      };
    },
    computed: {
      ...mapState(useBaseInfoStore, ['baseInfo']),
      canPraise() {
        return this.baseInfo.businessData.summary.canPraise; // 是否显示点赞图标由模版控制
      },
      isReplyItem() {
        return this.replyItem && this.replyItem.id === this.data.id;
      },
      attachmentList() {
        return this.data.attFileDomain?.filter(
          (item) => !this.secretLevelAble || Number(item.secretLevel) <= this.userSecretLevel
        );
      }
    },
    watch: {},
    created() {
      //附件密级过滤逻辑
      const {
        currentUser: { secretLevel }
      } = useBaseInfoStore().businessData;
      this.userSecretLevel = Number(secretLevel || '0');
      this.secretLevelAble = useBaseInfoStore().secretLevelAble;
    },
    mounted() {
      this.$nextTick(() => {});
    },
    methods: {
      statusReplaceStr(data) {
        if (data.extAtt4) {
          // 不同意
          if (data.extAtt4 == 'disagree') {
            return 3;
          } else if (data.extAtt4 == 'haveRead' || data.extAtt4 == 'agree') {
            // 同意 已阅
            return 2;
          }
        }
        // 暂存待办
        if (data.extAtt3I18n && data.extAtt3 !== 'collaboration.dealAttitude.repeat.auto.skip') {
          console.warn('意见区状态数据-extAtt3I18n-暂存待办', data.extAtt3I18n, data.extAtt3);
          return 1;
        }
        return 0;
      },
      dateFormat(date) {
        return globalMethods.getDateString(date);
      },
      showBaseInfo(createId) {
        return showBaseInfo(createId);
      },
      getDocArea(item) {
        return `reply-${item.id}-create`;
      },
      replyHandel(data, rootId) {
        // data.commentSubmitParams = this.data;
        this.$emit('reply', data, rootId);
      },
      /**
       * @description: 点赞、取消点赞
       * @param {Object}item 当前点赞项信息
       */
      async handleLike(item) {
        if (!this.clickFlag) {
          this.clickFlag = true;
          //能点赞才能点击
          const { praiseToComment, id } = item;
          //调接口
          if (await api.commentPraise(id, praiseToComment)) {
            //点赞了就取消
            if (praiseToComment) {
              item.praiseToComment = false;
              item.praiseNumber--;
            } else {
              //否则点赞
              item.praiseToComment = true;
              item.praiseNumber++;
            }
            this.clickFlag = false;
          }
        }
      }
    }
  };
</script>
<style lang="scss">
  .opinion-area-table {
    ul > li {
      list-style-type: disc;
    }

    ol > li {
      list-style-type: decimal;
    }

    ul,
    ol {
      padding-left: 20px;
    }

    em {
      font-style: italic;
    }

    table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
      margin: 0;
      overflow: hidden;

      td,
      th {
        min-width: 1em;
        border: 2px solid #ced4da;
        padding: 3px 5px;
        vertical-align: top;
        box-sizing: border-box;
        position: relative;

        > * {
          margin-bottom: 0;
        }
      }

      th {
        font-weight: bold;
        text-align: left;
        background-color: #f1f3f5;
      }

      .selectedCell:after {
        z-index: 2;
        position: absolute;
        content: '';
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(200, 200, 255, 0.4);
        pointer-events: none;
      }

      .column-resize-handle {
        position: absolute;
        right: -2px;
        top: 0;
        bottom: -2px;
        width: 4px;
        background-color: #adf;
        pointer-events: none;
      }

      p {
        margin: 0;
      }
    }
    code {
      text-wrap: wrap;
    }
  }
</style>
<style lang="scss" scoped>
  .opinion-area-item-cld:not(:empty) {
    .opinion-area-item {
      background-color: #e4e7ed33;
      transition: background-color 1s ease;
      border: 0;
      padding: 0;
      padding: 8px 12px 12px;
      .context-context-replyItem {
        border-radius: 2px;
      }
      .context-context {
        transition: background-color 1s ease;
      }

      .context-context-child {
      }
    }
    //楼中背景色
    .opinion-area-item-normal {
    }
  }
  .opinion-area-item-cld:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .opinion-area-item {
    width: 100%;
    margin-bottom: 10px;
    border: 0.5px solid #f0f0f0;
    border-radius: 2px;
    color: $c3;
    padding: 12px;

    .opinion-area-table {
      font-size: 14px;
    }

    .header-notes.header-bar {
      display: flex;
      margin-top: 4px;
      margin-bottom: 8px;
      color: $c9;
      align-items: center;
      .comment-data {
        flex: 1;
      }
    }
    .header-notes.header-bar.noReplayClass {
      margin-bottom: 0;
    }
    .comment-status {
      color: $c6;
      max-width: 68px;
      display: flex;
      background: #f5f5f5;
      border-radius: 2px;
      span {
        display: inline-block;
        padding: 1px 4px;
      }
      .att-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    // 待办
    .comment-status.comment-status-1 {
    }
    // 同意 已阅
    .comment-status.comment-status-2 {
    }
    // 不同意
    .comment-status.comment-status-3 {
      color: #ff4141;
      background: #fff1f0;
    }
    .context-context {
      width: 100%;
      font-size: 12px;
      .context-toolbar {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        .toolbar-header {
          margin-right: 8px;
          > img {
            height: 24px;
            width: 24px;
            border-radius: 15px;
          }
        }
        .toolbar-middle {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .toolbar-name-container {
            flex: 1;
            display: flex;
            align-items: center;
            margin-right: 12px;
            .toolbar-name-wrapper {
              display: inline-block;
              max-width: 100%;
              .toolbar-name-box {
                display: flex;
                align-items: center;
                .author-name {
                  cursor: pointer;
                  font-weight: 500;
                  max-width: 80px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  &:hover {
                    color: var(--theme-brand5, #40a9ff);
                  }
                }
                .department-name {
                  color: $c9;
                  margin-left: 8px;
                  flex: 1;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }
      .toolbar-reply {
        font-size: 12px;
        color: $c9;
        .process-logs {
          margin-right: 10px;
          font-size: 14px;
          cursor: pointer;
          &:hover {
            color: var(--theme-brand5, #40a9ff);
          }
        }
        .comment-praise {
          margin-right: 10px;

          &:hover {
            > span {
              color: $c9;
            }
          }
        }
        .comment-reply {
          color: var(--theme-brand6, #1890ff);
          cursor: pointer;
          &:hover {
            color: var(--theme-brand5, #40a9ff);
          }
        }
        .syIcon {
          font-size: 14px;
        }
      }

      .from-mobile {
        color: $c9;
        font-size: 12px;
        text-align: left;
      }
      .context-bottom {
        text-align: right;

        .setting-replay {
          display: flex;
          margin-top: 6px;
          line-height: 21px;
          // justify-content: center;
          align-items: center;
        }
        .replay-time {
          flex: 1;
          text-align: left;
        }
      }

      .sy-praise-fill,
      .praise-number {
        color: var(--theme-brand6, #1890ff);
      }
      .replay-state {
        display: flex;
        // margin-top: 4px;
        .proxy-member {
          font-weight: 400;
          font-size: 12px;
          color: #ff9900;
          letter-spacing: 0;
        }
      }
      .content-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
      }
    }
  }

  .opinion-area-item:first-child {
    margin-top: 2px;
  }
  .opinion-area-item-cld .opinion-area-item:first-child {
    margin-top: 0;
  }
  .opinion-area-item-cld .opinion-area-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .opinion-area-item:hover {
    border: 0.5px solid #f0f0f0;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0 0 12px 0 rgba(0, 0, 0, 0.03);
  }
  .opinion-area-item-cld .opinion-area-item:hover {
    border: none;
  }

  .log-wrapper {
    max-width: 300px;
    word-wrap: break-word;
    line-height: 24px;
  }

  .reply-content {
    font-size: 14px;
  }

  .praise {
    &:hover {
      cursor: pointer;
      color: #0077ff;
      color: var(--theme-brand5, #0077ff);
    }
  }
</style>
